<script setup>
import {computed, ref} from "vue";

const visible = ref(true)



//模式
const mode = ref('init')
//方向，1左 2右
const port = ref(1)

const dist = ref(0)

const distOption = {
  'init':[0],
  'operate':(()=>{
    const list = []
    for (let i = 1; i <= 1000; i++) {
      list.push(i)
    }
    return list
  })()
}
console.log('distOption',distOption.init)
console.log('distOption',distOption.operate)
const distList = ref([0])
const fillDistList = ()=>{
  for (let i = 1; i <=1000 ; i++) {
    distList.value.push(i)
  }
}
fillDistList(dist)

const name = computed(() => {

  console.log('----',mode.value === 'init'? [0]:distList)

  return  mode.value === 'init'? [0]:distList
})

</script>

<template>
<div>
  <q-dialog v-model="visible" >
    <q-card style="width: 70vw;height: 70vh;">
      <q-card-section>
        <div class="text-h5 text-center">夹爪控制</div>
      </q-card-section>
      <q-card-section class="q-pt-none">
        <div class="q-gutter-sm flex flex-center">
          <div class="text-h6">模式：</div>
          <div>
            <q-radio v-model="mode" val="init" label="初始化" />
            <q-radio v-model="mode" val="operate" label="操作" />
          </div>

        </div>
      </q-card-section>
      <q-card-section class="q-pt-none">
        <div class="q-gutter-sm flex flex-center">
          <div class="text-h6">夹具：</div>
          <div>
            <q-radio v-model="port" :val="1" label="向左" />
            <q-radio v-model="port" :val="2" label="向右" />
          </div>

        </div>
      </q-card-section>
      <q-card-section>
        <div class="text-h6">距离：</div>
        <q-select outlined v-model="dist" :options="name" label="Outlined" />

      </q-card-section>
      <q-card-actions align="right">
        <q-btn flat label="确定" color="primary" v-close-popup />
        <q-btn flat label="取消" color="primary" v-close-popup />
      </q-card-actions>
    </q-card>
  </q-dialog>

</div>
</template>

<style scoped>

</style>
